<template>
  <!-- 号牌设置 -->
  <div>
    <div class="title">规则号码牌配置</div>
    <div class="pageWrap">
      <el-tabs v-model="activeGroup" type="card" @tab-click="groupChange">
        <el-tab-pane v-for="(v,i) in groupArr" :key="i" :label="v.name" :name="'g'+i"></el-tab-pane>
      </el-tabs>
      <el-form label-width="110px">
        <el-col :md="12" :sm="24" class="box-col">
          <el-form-item label="性别前缀：" class="noBot">
            <el-switch
              class="etswitch"
              v-model="entryFrom.ifSex"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-value="1"
              :inactive-value="0"
            ></el-switch>
            <p class="tips">打开性别前缀，会在号码前,赛项前缀后(如果有的话)显示M(男)或者F(女)字母用来区别男女选手,报名表单填写项需设置性别项</p>
          </el-form-item>
        </el-col>
        <el-col :md="12" :sm="24" class="box-col" v-if="entryFrom.ifSex==0">
          <el-form-item label="固定前缀：" class="noBot">
            <el-input v-model="entryFrom.prefix" placeholder="请输入内容" class="etIpt"></el-input>
            <p class="tips">通常每个赛项都需要有不同的号码前缀。当然如果您的赛事只有一个赛项，您也可以不写前缀</p>
          </el-form-item>
        </el-col>

        <!-- 固定前缀(男 女)： -->
        <!-- <template v-if="entryFrom.ifSex==1"> -->
        <el-col :md="12" :sm="24" class="box-col" v-if="entryFrom.ifSex==1">
          <el-form-item label="固定前缀(男)：" class="noBot">
            <el-input class="etIpt" v-model="entryFrom.prefixM" placeholder="请输入内容"></el-input>
            <p class="tips">开启性别前缀后会拼在M/F之后，例：设置2 则以M2开头，当然如果不需要，您也可以不写前缀</p>
          </el-form-item>
        </el-col>
        <el-col :md="12" :sm="24" class="box-col" v-if="entryFrom.ifSex==1">
          <el-form-item label="固定前缀(女)：" class="noBot">
            <el-input class="etIpt" v-model="entryFrom.prefixF" placeholder="请输入内容"></el-input>
          </el-form-item>
        </el-col>
        <!-- </template> -->
        <el-col :md="12" :sm="24" class="box-col" v-if="entryFrom.ifSex==0">
          <el-form-item label="开始号码：" class="noBot">
            <el-input class="etIpt" v-model="entryFrom.startNumber" placeholder="请输入内容"></el-input>
          </el-form-item>
        </el-col>

        <el-col :md="12" :sm="24" class="box-col" v-if="entryFrom.ifSex==1">
          <el-form-item label="开始号码(男)：" class="noBot">
            <el-input class="etIpt" v-model="entryFrom.startNumberM" placeholder="请输入内容"></el-input>
          </el-form-item>
        </el-col>
        <el-col :md="12" :sm="24" class="box-col" v-if="entryFrom.ifSex==1">
          <el-form-item label="开始号码(女)：" class="noBot">
            <el-input class="etIpt" v-model="entryFrom.startNumberF" placeholder="请输入内容"></el-input>
          </el-form-item>
        </el-col>
        <el-col :md="12" :sm="24" class="box-col">
          <el-form-item label="号码位数：" class="noBot">
            <el-input class="etIpt" v-model="entryFrom.numberDigit" placeholder="请输入内容"></el-input>
            <span class="tips">如果输入5则表示号码形式为'00001'这种格式</span>
          </el-form-item>
        </el-col>
        <el-col class="box-col">
          <el-form-item label="号码黑名单：" class="noBot">
            <el-input
              type="textarea"
              :autosize="{ minRows: 6, maxRows: 10 }"
              placeholder="请输入内容"
              v-model="entryFrom.whiteSList"
            ></el-input>
            <span class="tips">黑名单中的号码不会被分配,以回车分割</span>
          </el-form-item>
        </el-col>
        <el-col class="box-col">
          <el-form-item label="电子号牌：" class="noBot">
            <el-button @click="showTemp=true">{{modelId==0?'添加':'修改'}}</el-button>
          </el-form-item>
        </el-col>
        <!-- 存在的话 -->
        <el-col v-if="modelId>0" class="box-col">
          <el-form-item label="模板预览：" class="noBot">
            <div class="tempModel" :style="{width:tempMsg.width+'px',height:tempMsg.height+'px'}">
              <img :src="tempMsg.imgUrl" style="width:100%;height:100%" />
              <div
                class="tempItem"
                v-for="(v,i) in tempMsg.items"
                :key="i"
                :style="{width: + v.vw+ 'px',height:+v.vh+'px',lineHeight:+v.vh+'px',textAlign:v.align,fontSize:v.size+'px',color:v.color,top:v.top+'px',left:v.left+'px'}"
              >
                <span
                  v-show="v.name!='erCode'"
                  :style="{display: 'inline-block',transform:`scale(${v.size<12?v.size/12:1})`}"
                >{{v.val}}</span>
                <img :src="v.val" v-show="v.name=='erCode'" style="width:100%;height:100%" />
              </div>
            </div>
          </el-form-item>
        </el-col>
      </el-form>
      <el-col>
        <el-button type="primary" @click="saveSet()">保存配置</el-button>
      </el-col>
    </div>
    <temp :modelId.sync="modelId" tempType="entry" :showTemp.sync="showTemp" v-if="showTemp" />
  </div>
</template>

<script>
import temp from "../../../components/temp";
export default {
  components: { temp },
  data() {
    return {
      showTemp: false,
      modelId: 0, // 号牌模板id
      activeGroup: "g0",
      groupArr: [],
      entryFrom: {
        prefix: "", //固定前缀
        startNumber: "", // 开始号码
        startNumberM: "", //开始号码男
        startNumberF: "", //开始号码女
        numberDigit: "", // 位数
        ifSex: 0, //性别
        whiteList: "",
        matchId: "",
        groupId: "",
        whiteSList: "",
      },
      tempMsg: {},
    };
  },
  watch: {
    showTemp() {
      if (!this.showTemp && this.modelId != 0) this.getTemp();
    },
  },
  methods: {
    groupChange() {
      let ii = this.activeGroup.replace(/g/g, "");
      this.modelId = 0;
      let oo = {
        m: sessionStorage.getItem("MandA"),
        g: this.$Base64.encode(this.groupArr[ii].id),
      };
      this.$axios
        .get("/sbr/entryNumber/getEntryNumberFactory", { params: oo })
        .then((res) => {
          let rr = res.data.data;
          if (rr.whiteList) {
            rr.whiteList = rr.whiteList.replace(
              /(^<br\s*\/?>)|(<br\s*\/?>$)/g,
              ""
            );
            rr.whiteSList = rr.whiteList.replace(/<br\s*\/?>/g, "\n");
            if (rr.startNumber == 0) rr.startNumber = "";
            if (rr.startNumberM == 0) rr.startNumberM = "";
            if (rr.startNumberF == 0) rr.startNumberF = "";
            this.entryFrom = rr;
          } else {
            this.entryFrom = {
              prefix: "", //固定前缀
              startNumber: "", // 开始号码
              startNumberM: "", //开始号码男
              startNumberF: "", //开始号码女
              numberDigit: "", // 位数
              ifSex: "0", //性别
              whiteSList: "",
              matchId: "",
              groupId: "",
              whiteList: "",
            };
          }
          this.modelId = rr.certificateId;
          if (rr.certificateId != 0) {
            this.getTemp();
          }
        });
    },
    // 获取赛项
    getGroupArr() {
      this.$axios
        .get("/sbr/match/getMatchInfos/" + sessionStorage.getItem("MandA"))
        .then((res) => {
          let rr = res.data.data;
          this.groupArr = rr.matchInfoLists;
          this.groupChange();
        });
    },
    saveSet() {
      let ii = this.activeGroup.replace(/g/g, "");
      this.entryFrom.matchId = this.$Base64.decode(
        sessionStorage.getItem("MandA")
      );
      this.entryFrom.groupId = this.groupArr[ii].id;
      this.entryFrom.whiteList = this.entryFrom.whiteSList.replace(
        /\n/g,
        "<br/>"
      );
      if (this.entryFrom.ifSex == 1) {
        this.entryFrom.prefix = "";
        this.entryFrom.startNumber = 0;
      } else {
        this.entryFrom.prefixM = "";
        this.entryFrom.prefixF = "";
        this.entryFrom.startNumberM = 0;
        this.entryFrom.startNumberF = 0;
      }
      this.entryFrom.whiteList = "<br/>" + this.entryFrom.whiteList + "<br/>";
      this.entryFrom.certificateId = this.modelId;
      this.$axios
        .post("/sbr/entryNumber/putEntryNumberFactory", this.entryFrom)
        .then((res) => {
          this.$message.success("保存成功");
        });
    },
    // 获取模板
    getTemp() {
      this.$axios
        .get("/sbr/match/getCertificate?id=" + this.modelId)
        .then((res) => {
          let rr = res.data.data;
          rr.width = parseInt(rr.width / 2);
          rr.height = parseInt(rr.height / 2);
          rr.items = JSON.parse(rr.items);
          rr.items.forEach((v) => {
            v.vw = parseInt(v.vw / 2);
            v.vh = parseInt(v.vh / 2);
            v.size = parseInt(v.size / 2);
            v.top = parseInt(v.top / 2);
            v.left = parseInt(v.left / 2);
          });
          this.tempMsg = rr;
        });
    },
  },
  created() {
    this.getGroupArr();
    // this.getTemp();
  },
};
</script>
<style scoped>
/* @import url(); 引入公共css类 */
.title {
  font-size: 20px;
  color: #303133;
}
.etswitch {
  float: left;
  width: 100%;
  height: 40px;
}
.noBot {
  width: 100%;
  margin-bottom: 15px;
  overflow: hidden;
  float: left;
}
.etIpt {
  float: left;
  width: 80%;
}
.tips {
  float: left;
  width: 90%;
  line-height: 1.5;
}
.tempModel {
  position: relative;
  overflow: hidden;
}
.tempItem {
  position: absolute;
}
.box-col {
  float: left;
  overflow: hidden;
}
</style>